"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/27
 */
import * as React from 'react'
import {commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import MyText from "../../component/MyText";
import {guideStyles} from "../../assets/styles/guide";
import {loginStyles} from "../../assets/styles/auth";
import {toastValidateError} from "../../utils/tools";
import {AuthPage} from "../../interface/router";

const {View, TouchableOpacity, Image, Keyboard} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {InputItem, WhiteSpace} = require('antd-mobile');
const {createForm} = require('rc-form');
const {KeyboardAwareScrollView} = require('react-native-keyboard-aware-scroll-view');

class LoginPage extends React.Component<AuthPage, any> {


    constructor(props: any, context: any) {
        super(props, context);
    }

    componentDidMount(): void {
        if (this.props.auth.access_token) {

        }
    }


    onBack = () => {
        console.log(this.props);
        if (this.props.from === 'guide') {
            Actions.pop();
        } else if (this.props.from === 'tab') {
            Actions.replace('guide', {from: 'auth'});
        }
    };

    /**
     * 提交登录
     */
    onSubmit = () => {
        Keyboard.dismiss();
        this.props.form.validateFields((errors, payload) => {
            if (errors) {
                toastValidateError(errors);
            } else {
                this.props.dispatch({
                    type: 'auth/oauth',
                    payload
                })
            }
        });
    };

    render() {
        const {getFieldProps} = this.props.form;
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton icon={{name: 'icon-cha1', color: '#fff', size: 20}}
                                                          onPress={this.onBack}/>}
                               title={{title: '登录', tintColor: '#fff'}}
                />
                <KeyboardAwareScrollView>
                    <WhiteSpace/>
                    <View style={commonStyles.formContainer}>
                        <InputItem placeholder="电子邮件"
                                   clear
                                   autoCapitalize={'none'}
                                   {...getFieldProps('username', {
                                       initialValue: 'wtfssd',
                                       rules: [
                                           {required: true, message: '电子邮件未填写'},
                                       ]
                                   })}/>
                        <InputItem type="password"
                                   placeholder="密码"
                                   clear
                                   autoCapitalize={'none'}
                                   {...getFieldProps('password', {
                                       initialValue: '111111',
                                       rules: [
                                           {required: true, message: '密码未填写'},
                                       ]
                                   })}/>
                    </View>

                    <View style={loginStyles.middle}>
                        <TouchableOpacity style={loginStyles.forgetPwd} onPress={Actions.forgetPwd}>
                            <MyText style={loginStyles.forgetPwdText}>忘记密码</MyText>
                        </TouchableOpacity>
                        <MyText style={loginStyles.provision}>登录即表示您同意我们的服务条款和隐私政策</MyText>
                    </View>

                    <View style={commonStyles.flex1}>
                        <TouchableOpacity activeOpacity={0.9} onPress={this.onSubmit}>
                            <View style={guideStyles.loginBth}>
                                <MyText style={guideStyles.loginText}>登录</MyText>
                            </View>
                        </TouchableOpacity>
                        <Image source={require('../../assets/image/guide.png')}/>
                    </View>
                </KeyboardAwareScrollView>
            </View>
        );
    }
}

const Wrapper = createForm()(LoginPage);
export default connect(
    ({sys, auth}) => ({sys, auth})
)(Wrapper);